<template>
  <div class="setting">
    <div class="content-container">
      <!-- 左侧：文件列表区域 -->
      <div class="file-list-container" v-if="fileList.length > 0">
        <h3 class="file-list-title">已上传文件列表</h3>
        <ul class="file-list">
          <li v-for="(file, index) in fileList" :key="index" class="file-item">
            <div class="file-item-content">
              {{ file.name }}
              <button @click="deleteFile(file.name)" class="delete-button">删除</button>
            </div>
          </li>
        </ul>
      </div>
      <!-- 右侧：拖拽上传区域 -->
      <div class="upload-container">
        <label for="fileInput" class="upload-label">
          <span class="upload-icon">+</span>
          <span class="upload-text">点击或拖拽文件到这里</span>
        </label>
        <input type="file" id="fileInput" class="upload-input" @change="handleFileChange"/>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dialogVisible: false,
      uploadStatus: null, // 可以是 'success' 或 'error'
      fileList: [] // 初始化为空数组
    };
  },
  methods: {
    async handleFileChange(event) {
      const file = event.target.files[0];
      console.log(file)
      if (file) {
        try {
          const loading = this.$loading({
            lock: true,
            text: '正在嵌入文件',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          const formData = new FormData();
          formData.append('file', file);
          // 发送文件到后端接口
          await this.uploadFile(formData);
          loading.close();
          this.$message.success("文本嵌入成功");
          // 文件上传成功后重新获取文件列表
          await this.getFiles();
        } catch (error) {
          console.error('Error uploading file:', error);
          this.$message.error("文本嵌入失败");
        }
      }
    },
    async uploadFile(formData) {
      const url = 'http://localhost:8888/api/ollama/embeddings/file/upload'; // 替换为你的后端地址
      const response = await axios.post(url, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      return response.data;
    },
    closeDialog() {
      this.dialogVisible = false;
      this.uploadStatus = null; // 重置状态
    },
    async getFiles() {
      try {
        const response = await axios.get('http://localhost:8888/api/ollama/embeddings/file/list');
        this.fileList = response.data.map(embedding => ({
          name: embedding.fileId || "未知文件", // 根据实际情况调整
          id: embedding.id
        }));
      } catch (error) {
        console.error('Error fetching files:', error);
      }
    },
    async deleteFile(fileId) {
      try {
        const url = `http://localhost:8888/api/ollama/embeddings/file/delete?fileId=${fileId}`;
        await axios.get(url); // 使用 GET 请求，根据后端接口定义
        this.$message.success("文件删除成功");
        // 删除成功后重新获取文件列表
        await this.getFiles();
      } catch (error) {
        console.error('Error deleting file:', error);
        this.$message.error("文件删除失败");
      }
    }
  },
  created() {
    // 组件创建时获取文件列表
    this.getFiles();
  }
}
</script>

<style scoped>
.setting {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #272a37;
  color: #e0e0e0;
}

.content-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.upload-container, .file-list-container {
  flex: 1;
  margin: 0 50px;
  background-color: #2c2f3d;
  border-radius: 10px;
  padding: 20px;
}

.upload-container {
  border: 2px dashed #4d515b;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.upload-label {
  color: #e0e0e0;
  font-size: 16px;
}

.upload-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.upload-input {
  display: none;
}

.file-list-title {
  font-size: 18px;
  margin-bottom: 12px;
  color: #e0e0e0;
}

.file-list {
  height: 60vh;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.file-item {
  background-color: #363946;
  border: 1px solid #4d515b;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #e0e0e0;
  display: flex; /* 使用 flexbox */
  align-items: center; /* 垂直居中 */
}

.file-item-content {
  display: flex;
  justify-content: space-between;
  width: 100%; /* 确保内容占满整个宽度 */
}

.delete-button {
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  margin-left: auto; /* 居右 */
  cursor: pointer;
}

.delete-button:hover {
  background-color: #c0392b;
}
</style>
